<template>
  <view class="base-card" @click="onchange">
    <uni-card :border="false" :is-full="true" :title="title" v-bind="$attrs" shadow='0px 0px 3px 1px rgba(0, 0, 0, 0.01)'>
      <slot v-if="$slots.title" name="title">
        <template #title/>
      </slot>
      <template v-if="$slots.extra" #extra>
        <slot name="extra"/>
      </template>
      <view class="base-card-content">
        <slot/>
      </view>
      <template v-if="$slots.actions" #actions>
        <view class="button-group" style="padding-bottom: 20rpx;">
          <slot name="actions"></slot>
        </view>
      </template>
    </uni-card>
  </view>
</template>

<script>
export default {
  props: {
    title: {type: String, default: () => ""}
  },
  data() {
    return {};
  },
  methods: {
    onchange() {
      this.$emit('changeClick')
    }
  },
}
</script>

<style lang="scss">
.base-card {
  margin-bottom: 20rpx;
  background: white;

  ::v-deep(.uni-card__header) {
    border-bottom: none !important;
  }
	
  .base-card-content {
    margin: 5rpx;

    // view {
    //   color: #333333;
    //   text:first-child {
    //     margin-right: 1.1em;
    //     font-size: .85em;
    //     color: #999999;
    //   }
    // }
  }

  .button-group {
    float: right;
  }
}

</style>
